<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_伪类选择器_结构伪类_2</title>
</head>
<style>
    /*   结构1  选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的最后一个儿子 --看结构3  */
         /* last-child 所有孩子的最后一个元素 */ 
        /* div>p:last-child {
            color: red;
        } */


        /* 结构2 */
        /* 选中的是第n个儿子p元素，按照所有儿子计算的 */
        /* div>p:nth-child(3){
            color: red;
        } */


        /* 结构2 */
        /* 选中的是第偶数儿子p元素，按照所有儿子计算的 */
        /* 数据必须为an+b  n重0开始 */
        /* div>p:nth-child(2n){
            color: red;
        } */

        /* 结构3 */
        /* 选中div的第一个儿子p元素，按照所有同类型p元素兄弟计算的 */
        /* div>p:first-of-type{
            color: red;
            } */

        /* 结构3 */
        /* 选中div的最后一个个儿子p元素，按照所有同类型p元素兄弟计算的 */
        /* div>p:last-of-type{
            color: red;
        } */


         /* 结构3 */
        /* 选中div的第n个儿子p元素，按照所有同类型p元素兄弟计算的 */
        div>p:nth-of-type(3){
            color: red;
        }
</style>
<body>
    <!-- 结构1
        <div>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
    </div> -->

    <!-- 结构2 -->
    <!-- <div>
        <p>第一个</p>
        <p>第二个</p>
        <p>第三个</p>
        <p>第四个</p>
        <p>第五个</p>
        <p>第六个</p>
        <p>第七个</p>
        <p>第八个</p>
        <p>第九个</p>
        <p>第十个</p>
        
    </div> -->


    <!-- 结构3 -->
    <div>
    <span>测试</span>
    <p>张三：98分</p>
    <p>李四：88分</p>
    <p>王五：78分</p>
    <p>赵六：68分</p>
    <p>孙七：58分</p>
    <p>老八：48分</p>
</div>
</body>
</html>